<template>
  <div
    class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200"
  >
    <!-- 头部图标：PC端 -->
    <div class="hidden pt-[.5rem] h-[.8rem] xl:block">
      <img
        v-lazy
        class="m-auto h-full w-auto cursor-pointer"
        src="@/assets/style/svg/pinia-logo.svg"
        alt=""
        @click="$router.push('/')"
      />
    </div>
    <!-- 头部图标：移动端 -->
    <div class="h-[111px] xl:hidden">
      <img
        v-lazy
        class="dark:hidden"
        src="https://res.lgdsunday.club/login-bg.png"
        alt=""
      />
      <img
        v-lazy
        class="h-[.5rem] w-auto absolute top-[5%] left-[50%] translate-x-[-50%] cursor-pointer"
        src="@/assets/style/svg/pinia-logo.svg"
        alt=""
        srcset=""
        @click="$router.push('/')"
      />
    </div>
    <!-- 表单区 -->
    <div
      class="block px-[.3rem] mt-[.4rem] dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-[.8rem] xl:py-[.4rem] xl:rounded-sm xl:shadow-lg"
    >
      <h3
        class="mb-[.2rem] font-semibold text-base text-main dark:text-zinc-300 hidden xl:block"
      >
        账号登录
      </h3>
      <!-- 表单 -->
      <vee-form @submit="onSubmit">
        <vee-field
          class="formInput"
          name="username"
          type="text"
          placeholder="用户名"
          autocomplete="on"
          v-model="loginForm.username"
          :rules="validateUsername"
        />
        <vee-error-message
          class="text-sm text-red-600 block mt-[.05rem] text-left"
          name="username"
        />
        <vee-field
          class="formInput"
          name="password"
          type="password"
          placeholder="密码"
          autocomplete="on"
          v-model="loginForm.password"
          :rules="validatePassword"
        />
        <vee-error-message
          class="text-sm text-red-600 block mt-[.05rem] text-left"
          name="password"
        />
        <div class="pt-[.1rem] pb-[.3rem] leading-[0px] text-right">
          <span
            @click="toReg"
            class="inline-block p-[.1rem] text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-400 cursor-pointer"
          >
            去注册
          </span>
        </div>

        <m-button
          size="large"
          class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
        >
          登录
        </m-button>
      </vee-form>

      <div class="flex justify-around items-center mt-[.4rem] h-[150px]">
        <!-- QQ -->
        <i
          class="iconfont icon-QQ w-[.4rem] cursor-pointer text-[35px] text-blue-400"
        ></i>
        <!-- 微信 -->
        <i
          class="iconfont icon-weixin w-[.4rem] cursor-pointer text-[35px] text-green-500"
        ></i>
      </div>
    </div>
    <slider-captcha
      v-if="isVisibleCaptcha"
      @success="onCaptchaSuccess"
      @close="isVisibleCaptcha = false"
    ></slider-captcha>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import { validateUsername, validatePassword } from '../form-validate'
import SliderCaptcha from './slider-captcha.vue'
import { useUserStore } from '@/store/user'
import { useSystemStore } from '@/store/system'
import { LOGIN_TYPE_USERNAME } from '@/assets/js/constant'

const router = useRouter()
const userStore = useUserStore()
const systemStore = useSystemStore()

const loginForm = ref({
  username: 'LGD_Sunday',
  password: '123123'
})

const isVisibleCaptcha = ref(false)

const loading = ref(false)

const onSubmit = async () => {
  isVisibleCaptcha.value = true
  // try {
  //   await userStore.login({
  //     ...loginForm.value,
  //     loginType: LOGIN_TYPE_USERNAME
  //   })
  // } finally {
  //   loading.value = false
  // }
  // router.push('/')
}

/**
 * 验证通过
 */
const onCaptchaSuccess = async () => {
  isVisibleCaptcha.value = false
  try {
    await userStore.login({
      ...loginForm.value,
      loginType: LOGIN_TYPE_USERNAME
    })
  } finally {
    loading.value = false
  }
  router.push('/')
}

const onLogin = () => {
  loading.value = true
}

/**
 * 去注册
 */
const toReg = () => {
  // 移动端下跳转类型
  systemStore.routerType = 'push'
  router.push('/register')
}
</script>

<style lang="scss">
.formInput {
  width: 100%;
  outline: none;
  padding: 15px;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
}
</style>
